<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        body{
            margin: 0;
        }
        button{
            margin: 0;
            background-color: rgba(0,0,0,0);
            border:0;
            width: 50px;
            height: 50px;
        }
        #openm{
            display: none;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header style="background-color: #0096dc">
            <h1 style="color: white;font-size: 22px">
                蚁居
                <span style="float: right">
          用户设置
        </span>
            </h1>
        </el-header>
        <el-container>
            <el-aside id="aside" style="width: 200px;height: 877px;background-color: lightgrey;position: relative">

                <el-menu @select="handleSelect" style="background-color: lightgrey;">

                    <el-menu-item><i class="el-icon-plus"></i>快捷新增</el-menu-item>
                    <el-menu-item index="1">
                        <template slot="title"><i class="el-icon-s-grid"></i>
                            <span>工作台</span>
                        </template>
                    </el-menu-item>
                    <el-menu-item index="2">
                        <template slot="title"><i class="el-icon-s-opportunity"></i>
                            <span>线索</span>
                        </template>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <template slot="title"><i class="el-icon-user-solid"></i>
                            <span>客户</span>
                        </template>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <template slot="title"><i class="el-icon-user"></i>
                            <span>客户公海</span>
                        </template>
                    </el-menu-item>
                    <el-menu-item index="5">
                        <template slot="title"><i class="el-icon-phone"></i>
                            <span>联系人</span>
                        </template>
                    </el-menu-item>
                    <el-menu-item index="6">
                        <template slot="title"><i class="el-icon-coin"></i>
                            <span>商机</span>
                        </template>
                    </el-menu-item>
                    <el-menu-item index="7">
                        <template slot="title"><i class="el-icon-document"></i>
                            <span>合同</span>
                        </template>
                    </el-menu-item>
                </el-menu>
                <div style="position: absolute;bottom: 10px">
                <button @click="closemenu()" id="closem" style="float:left;"><i class="el-icon-s-fold"></i></button><br>
                <button @click="openmenu()" id="openm" style="float: left;"><i class="el-icon-s-unfold"></i></button>
                </div>
            </el-aside>

            <el-main>
                <!--工作台开始-->
                <el-table v-if="currentIndex=='1'" :data="categoryArr">
                    <el-table-column label="序号" type="index"></el-table-column>
                    <el-table-column label="分类名称" prop="name"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleCategoryDelete(scope.$index, scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--工作台结束-->

                <!--线索开始-->
                <el-table v-if="currentIndex=='2'" :data="bannerArr">
                    <el-table-column label="序号" type="index"></el-table-column>
                    <el-table-column label="轮播图" width="100px">
                        <template slot-scope="scope">
                            <img :src="scope.row.url" width="100%">
                        </template>
                    </el-table-column>
                </el-table>
                <!--线索结束-->

                <!--客户开始-->
                <el-table v-if="currentIndex=='3'" :data="productArr">
                    <el-table-column label="序号" type="index"></el-table-column>
                    <el-table-column label="商品名称" prop="title"></el-table-column>
                    <el-table-column label="商品价格" prop="price"></el-table-column>
                    <el-table-column label="商品原价" prop="oldPrice"></el-table-column>
                    <el-table-column label="库存" prop="saleCount"></el-table-column>
                    <el-table-column label="商品图片">
                        <template slot-scope="scope">
                            <img :src="scope.row.url" width="100%">
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleCategoryDelete(scope.$index, scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--客户结束-->

                <!--客户公海开始-->
                <el-table v-if="currentIndex=='4'" :data="productArr">
                    <el-table-column label="序号" type="index"></el-table-column>
                    <el-table-column label="轮播图" width="100px">
                        <template slot-scope="scope">
                            <img :src="scope.row.url" width="100%">
                        </template>
                    </el-table-column>
                </el-table>
                <!--客户公海结束-->


                <!--联系人开始-->
                <el-table v-if="currentIndex=='5'" :data="productArr">
                    <el-table-column label="序号" type="index"></el-table-column>
                    <el-table-column label="商品名称" prop="title"></el-table-column>
                    <el-table-column label="商品价格" prop="price"></el-table-column>
                    <el-table-column label="商品原价" prop="oldPrice"></el-table-column>
                    <el-table-column label="库存" prop="saleCount"></el-table-column>
                    <el-table-column label="商品图片">
                        <template slot-scope="scope">
                            <img :src="scope.row.url" width="100%">
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleCategoryDelete(scope.$index, scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--联系人结束-->

                <!--商机开始-->
                <el-table v-if="currentIndex=='6'" :data="productArr">
                    <el-table-column label="序号" type="index"></el-table-column>
                    <el-table-column label="商品名称" prop="title"></el-table-column>
                    <el-table-column label="商品价格" prop="price"></el-table-column>
                    <el-table-column label="商品原价" prop="oldPrice"></el-table-column>
                    <el-table-column label="库存" prop="saleCount"></el-table-column>
                    <el-table-column label="商品图片">
                        <template slot-scope="scope">
                            <img :src="scope.row.url" width="100%">
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleCategoryDelete(scope.$index, scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--商机结束-->

                <!--合同开始-->
                <el-table v-if="currentIndex=='7'" :data="productArr">
                    <el-table-column label="序号" type="index"></el-table-column>
                    <el-table-column label="商品名称" prop="title"></el-table-column>
                    <el-table-column label="商品价格" prop="price"></el-table-column>
                    <el-table-column label="商品原价" prop="oldPrice"></el-table-column>
                    <el-table-column label="库存" prop="saleCount"></el-table-column>
                    <el-table-column label="商品图片">
                        <template slot-scope="scope">
                            <img :src="scope.row.url" width="100%">
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleCategoryDelete(scope.$index, scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--合同结束-->


            </el-main>
        </el-container>
    </el-container>

</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script src="app.js"></script>
</html>